<template>
  <div class="body page-miH page-bgBack">
    <a-row type="flex" justify="space-between" class="mg_b20">
      <a-col>
        <a-input-search
          v-model="value"
          placeholder="姓名/手机号/分管公司"
          style="width: 200px; margin-right: 24px"
          allowClear
          @search="onSearch"
        />
        <a-select v-model="roleId" allowClear placeholder="账号角色" style="width: 200px" @change="onSearch">
          <a-select-option :value="item.id" v-for="item in roleList" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col>
        <a-button type="primary" icon="plus" @click="addCompany"> 添加账号 </a-button>
      </a-col>
    </a-row>
    <a-table
      :row-key="(a, b) => b"
      :pagination="pagination"
      :data-source="dataSource"
      :loading="tableLoading"
      @change="({ current }) => (pagination.current = current)"
    >
      <a-table-column title="姓名" data-index="name" align="center" />
      <a-table-column title="手机号" data-index="phone" align="center" />
      <a-table-column title="分管公司" data-index="companyName" align="center" />
      <a-table-column title="账号角色" data-index="roleName" align="center" />
      <a-table-column title="操作" :width="212" align="center">
        <template slot-scope="text">
          <a-button type="link" @click="geEditor(text)">编辑</a-button>
          <a-button type="link" @click="deleteCount(text)">删除</a-button>
        </template>
      </a-table-column>
    </a-table>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { getSite, getList } from "./api";
export default {
  name: "AccountManagement",

  data() {
    return {
      dataSource: [],
      copyData: [],
      roleList: [],
      pagination: {
        current: 1,
        pageSize: 10
      },
      tableLoading: false,
      value: "",
      roleId: undefined
    };
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        onChange: (selectedRowKeys, selectedRows) => {},
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === "Disabled User", // Column configuration not to be checked
            roleId: record.roleId,
            name: record.name
          }
        })
      };
    }
  },

  created() {
    this.getUserRolesList();
    this.allCompany();
    this.onGetSite();
  },

  methods: {
    deleteCount(e) {
      console.log(e);
      this.$confirm({
        title: "删除提示",
        content: "该操作将永久删除,确定删除该账号吗?",
        onOk: () => {
          this.$request({
            method: "POST",
            url: `/hr/api/v1/users/delete`,
            data: [e.id]
          }).then(({ success }) => {
            if (success) {
              this.$notification["success"]({ message: "删除成功" });
              this.getUserRolesList();
            }
          });
        }
      });
    },
    // 获取所有公司
    ...mapActions({ allCompany: "admin/syncGetCompany" }),
    // 用户管理列表
    async getUserRolesList() {
      this.tableLoading = true;
      const { data } = await this.$request({ url: `/hr/api/v1/users/queryUserListLessToMe` });
      this.tableLoading = false;
      this.copyData = [...data];
      this.dataSource = data;
    },
    async onGetList() {
      try {
        this.tableLoading = true;
        const { data } = await getList({
          roleId: this.roleId ? this.roleId : null
        });
        this.tableLoading = false;
        this.copyData = [...data];
        this.dataSource = data;
      } catch (err) {
        this.tableLoading = false;
        console.log("debug log --> ", err);
      }
    },
    async onGetSite() {
      try {
        const { data } = await getSite(
          {
            subjectType: "company"
          },
          localStorage.getItem("siteId")
        );
        this.roleList = data;
      } catch (err) {
        console.log("debug log --> ", err);
      }
    },
    // 编辑
    geEditor(query) {
      this.$router.push({
        path: "add_account_management",
        query
      });
    },
    // 添加账号
    addCompany() {
      this.$router.push({ path: "add_account_management" });
    },
    // 角色管理
    ctrlRoles() {
      this.$router.push({ path: "/admin/role" });
    },
    // 查询
    onSearch() {
      let temp = [...this.copyData];
      if (this.roleId) {
        temp = temp.filter((item) => item.roleId === this.roleId);
      }
      if (this.value) {
        temp = temp.filter((item) => {
          if (item.name && item.name.includes(this.value)) {
            return true;
          } else if (item.phone && item.phone.includes(this.value)) {
            return true;
          } else if (item.companyAllName && item.companyAllName.includes(this.value)) {
            return true;
          }
          return false;
        });
      }
      this.dataSource = temp;
      this.pagination.current = 1;
    }
  }
};
</script>
<style lang="scss" scoped>
.body {
  padding: 25px;
  .company {
    color: #333333;
    font-size: 16px;
  }
}
</style>
